<template>
    <div>
        <van-nav-bar title="菜单" >
            <template #right >
                <div >
                    <van-icon name="search" size="18" @click="searchFocus"/>
                    
                </div>
            </template>
        </van-nav-bar>


        <div class="menu">
            <div class="menu-left">
                <!-- 每一个分类 -->
                <div class="left-item" v-for="(item, index) in prolist " :class="{ activeCss: activeVar == index }"
                    :key="index" @click="getchangePro(item.type, index)">
                    <span class="demo" :class="{activeDemo: activeVar == index }">
                        {{ item.typeDesc }}
                    </span>
                </div>
                
            </div>
            <div class="menu-right">

                <!-- 每一个商品 -->
                <!-- 宣传图 -->
                <div>
                    <!-- <img src="../assets/1.png" alt=""> -->
                </div>
                <div class="protitle">{{ prolist[activeVar].typeDesc }}</div>
                    <div class="right-item" v-for="(item,index) in shoplist">
                        <div class="imgg" @click="getProcq(item.pid,index)">
                            <img :src="item.largeImg" alt="" style="border-radius: 15px; height: 90%;"/>
                        </div>
                        <div class="zi">
                            <div class="zii1 ">{{ item.name }}</div>
                            <div class="zi1">{{ item.enname }}</div>
                        </div>
                        <div class="zii2 ">￥ {{ item.price }}</div>
                    </div>
                   

            </div>

        </div>

    </div>
</template>

<script>
import { useRouter} from "vue-router";
import { get } from '../request'
import { ref } from 'vue'
export default {

setup() {
    //搜索跳转
        const searchFocus = () =>{
            router.push('/Search');
        }
    //点击变色
    //默认高亮的下标
    const activeVar = ref(0);
    const getchangePro = (item, index) => {
        activeVar.value = index;
        console.log("index", activeVar.value);
        console.log(item);
      
        getShop(item)

    };
    //商品列表
    const prolist = ref([{
        typeDesc: "latte"
    }])
    const getPro = async () => {
        const res = await get("/type")
        prolist.value = res.data.result
        console.log("商品列表", res);
        getShop(res.data.result[activeVar.value].type)
        
    }
    getPro()
    //存放商品
    const shoplist = ref([])
    const getShop = async (type) => {
        const res = await get("/typeProducts", {
            params: {
                key: 'type',
                value: type
            }
        })
        shoplist.value = res.data.result
        console.log("商品 信息", res);
    }
 
    
    //点击返回键返回上一页
    const onClickLeft = () => history.back();
    //点击搜索进行跳转
    const router = useRouter()
    const viewLogin = () => {
        router.push({ name: "LoginReg" })
    }

    //点击进入商品详情页
    const getProcq = (e) => {
        //console.log("e", e);
        router.push({ name: "Detail",query: { id: e }})
    }


    return { 
        getProcq, 
        prolist, 
        getPro, 
        getShop, 
        shoplist, 
        activeVar,
        getchangePro, 
        onClickLeft, 
        viewLogin,
        searchFocus
        }
}


}

</script>

<style lang="less" scoped>
.protitle {
    width: 100%;
    background-color: #7ba9d7;
    margin-bottom: 10px;
    text-align: center;
    height: 30px;
    font-size: 18px;
    line-height: 30px;
    border-radius: 18px;
}
.menu {
    position: fixed;
    top: 46px;
    left: 0;
    right: 0;
    bottom: 15px;
    display: flex;

    .menu-left {
        width: 80px;

        .left-item {
            
            height: 40px;
            text-align: center;
            overflow: hidden;
            font-size: 16px;
            .demo{
                display: block;
                height: 20px;
                margin-top: 10px;
                border-left: 3px solid transparent;
            }
            .activeDemo{
                border-color: #4055bd;
            }
        }

        .activeCss {
            background-color: #fff;
        }
    }

    .menu-right {
        flex: 1;
        background-color: #f6f6f6;
        padding: 10px;
        overflow-y: scroll;

        .right-item {
            width: 275px;
            // position: fixed;
            display: flex;
            height: 100px;
            background-color: #fff;
            margin-bottom: 10px;
            border-radius: 10px;
            text-align: center;
            // line-height: 100px;
        }
        .zi {
            // background-color: rgb(92, 97, 97);
            text-align: center;
            width: 50%;

            .zii1 {
                margin-top: 20px;
                font-size: 15px;
                line-height: 20px;
            }

            .zi1 {
                font-size: 12px;
                line-height: 20px;
                padding-top: 3px;
            }
        }

        .zii2 {
            margin-top: 30px;
            color: #4055bd;
            font-size: 15px;
        }

        .imgg {
            margin-top: 8px;
            margin-left: 3px;
        }

        // .imgs {
        //     height: 150px;
        //     margin-left: 100px;
        // }

    }
}
</style>